import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView } from '@tarojs/components';
import NewsItem from "../news-item/news-item";
import { post } from "../../api/fetch"
import nothingSrc from '../../assets/images/common/404.png'

import './waterfall-com.scss'


class WaterfallCom extends Component {
  constructor(props) {
    super(props)
    this.state={
      imgwidth: 0,
      leftList: new Array(),
      rightList: new Array(),
      pageNum: 1,
      pageSize: 10,
      total: 0,
      scrollHeight: 0,
    }
  }
  componentDidMount() {
    const res = Taro.getSystemInfoSync()
    let scrollHeight = res.windowHeight-50;
    var imGwidth = res.windowWidth - 20;
    var imgwidth = imGwidth / 2;
    this.setState({
      imgwidth,
      scrollHeight,
      leftList: new Array(),
      rightList: new Array(),
    }, () => {
      this.fetchData(1);
    });
  }
  fetchData(pageNum, keywords= this.props.keywords) {
    var that = this;
    var leftList = new Array();
    var rightList = new Array();
    var leftHight = 0, rightHight = 0, maxHeight = 500;
    let params= {
      keywords,
      pageNum,
      pageSize: this.state.pageSize,
    };
    post('/contentSearch', params).then((res) => {
      var postList = res.data;
      let total = res.total;
      
      this.setState({
        total,
        pageNum,
      });
      if(postList.length>0){
        for (let i = 0, len = postList.length; i < len; i++) {
          
          let tmp = postList[i];
          tmp.width = tmp.width; //获取图片真实宽度
          tmp.height = tmp.height; //获取图片真实高度
          tmp.itemWidth = this.state.imgwidth; //获取图片显示宽度
          let per = tmp.width / tmp.itemWidth; /*获取图片显示比例*/
          tmp.itemHeight = tmp.height / per;/*获取图片显示高度*/
  
          if (tmp.itemHeight > maxHeight) {
            tmp.itemHeight = maxHeight;//超限时候设置图片高度为默认高度，防止被刷屏
          }
          if (leftHight == rightHight) {
            leftList.push(tmp);
            
            leftHight = leftHight + tmp.itemHeight;
          } else if (leftHight < rightHight) {
            leftList.push(tmp);
            leftHight = leftHight + tmp.itemHeight;
          } else {
            rightList.push(tmp);
            rightHight = rightHight + tmp.itemHeight;
          }
        }
      }
      
      const leftListExit = this.state.leftList
      const rightListExit = this.state.rightList
      that.setState({
        leftList: leftListExit.concat(leftList),
        rightList: rightListExit.concat(rightList),
      });
      this.props.onTotal(total);
    })
  }
  onScrollToUpper = () => {
    console.log('滚动到顶部事件')
  }
  loadMore = () => {
    let {pageNum, pageSize} = this.state
    if(this.state.total < pageNum * pageSize){
      return
    }
    this.fetchData(++pageNum);
    
  }
  render() {
    const { leftList, rightList, scrollHeight } = this.state
    const scrollStyle = {height: scrollHeight+'px',}
    return (
      <View className='result-list'>
        <ScrollView 
          className='content scrollview'
          scrollY
          scrollWithAnimation
          style={scrollStyle}
          onScrollToUpper={this.onScrollToUpper}
          onScrollToLower={this.loadMore}
        >
          <View className='left'>
            {leftList.map((item) => {
              return  <View key={item.docid}>
              <NewsItem
                title={item.name}
                publisher={item.publisher}
                zan_num={item.likeCount}
                imgsrc={item.previewImagePath}
                newsId={item.id}
                avatar={item.publisherAvatar}
              />
            </View>
            })}
          </View>
          <View className='right'>
            {rightList.map((item) => {
              return <View key={item.docid}>
              <NewsItem
                title={item.name}
                publisher={item.publisher}
                zan_num={item.likeCount}
                imgsrc={item.previewImagePath}
                newsId={item.id}
                avatar={item.publisherAvatar}
              />
            </View>
            })}
          </View>
          {rightList.length === 0 && leftList.length === 0 &&
            <View className='nothings'>
              <Image
                  className=''     
                  src={nothingSrc}                 
                  mode='widthFix'     
              />
              <Text className='text'>暂时没有内容哦</Text>
            </View>
          }
        </ScrollView>
      </View>
    )
  }
}

export default WaterfallCom
